jQuery 表单校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery.validate示例</title>
<!--
<script src="./jquery-3.7.1.js"></script>
<script src="./jquery.validate-1.17.0.js"></script>
-->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.17.0/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
// 自定义“大于”验证函数
$.validator.addMethod("gt", function(value, element, param) {
return this.optional(element) || parseFloat(value) > parseFloat(param);
}, "值必须大于 {0}");
// 注册手机号验证规则 (命名为 mobile)
$.validator.addMethod("mobile", function(value, element) {
return this.optional(element) || /^1[3-9]\d{9}$/.test(value);
}, "请输入正确的手机号码！");
// 注册固话验证规则 (命名为 phone)
$.validator.addMethod("phone", function(value, element) {
console.log('phone = ' + value);
// debugger;
if (!(7 === value.length || 8 === value.length)) return false;
return this.optional(element) || /^(\d{3,4}-?)?\d{7,9}$/.test(value);
}, "请输入正确的固定电话！");
$("#myForm").validate({
rules: {
username: {
required: true
, minlength: 3
, maxlength: 18
}
, email: {
required: true
, email: true
}
, mobile: {
required: true
, mobile: true
}
, telephone: {
required: true
, phone: true
}
, age: {
required: true,
digits: true // 只能是正整数或 0
, min : 10
}
, score: {
required: true,
number: true // 只能是数字🔢，可以是小数，可以是整数、可以是 0。
, min : 0.5 // 最低是 0.5 分。
}
, weight: {
required: true,
digits: true // 只能是正整数。
, min : function (element) {
console.log('体重：' + element.value);
//debugger;
return 0 == element.value;
}
}
, height: {
required: true,
digits: true // 只能是正整数。
, min : 50
}
, width: {
required: true,
digits: true // 只能是正整数。
, max : function (element) { return parseInt($('#height').val()) }
, min : 10
}
},
messages: {
username: {
required: "请输入用户名！"
, minlength: "用户名至少需要 3 个字符！"
, maxlength: "用户名不可🙅♂️超过 8 个字符！"
}
, email: {
required: "请输入电子邮件📮！"
, email: "请输入有效的电子邮件📮地址！"
}
, mobile: {
required: "请输入手机📱号！"
, mobile: "请输入有效的手机📱号！"
}
, telephone: {
required: "请输入固话☎️号码！"
, phone: "请输入有效的固话☎️号码！"
}
, age: {
required: "请输入年龄！",
digits: "年龄必须是正整数！"
, min : '年龄不🙅♂️可低于 10 岁！'
}
, score: {
required: "请输入分数！",
number: "分数必须是数字！"
, min : '分数不可🙅♂️低于 0.5！'
}
, weight: {
required: "请输入体重！",
digits: "体重只能是正整数！"
, min : '体重不能为 0！'
}
, height: {
required: "请输入身高！",
digits: "身高只能是正整数！"
, min : '身高不能低于 50 厘米！'
}
, width: {
required: "请输入腰围！",
digits: "腰围只能是正整数！"
, max : '腰围不可🙅♀️超过身高！'
, min : '腰围不可🙅♀️小于 10 厘米！'
}
}
, submitHandler: function(form) {
// 表单提交的代码，例如使用 AJAX 提交表单数据等。
form.submit(); // 或者使用 $.ajax() 等方式提交数据。
}
});
});
const validateForm = function() {
$("#myForm").validate();
if ($("#myForm").valid()) { // 手动触发验证
// 验证通过后的逻辑
$("#myForm").submit();
}
}
</script>
</head>
<body>
<form id="myForm">
<label for="username">用户名:</label>
<input type="text" name="username" id="username"><br /><br />
<label for="email">电子邮件📮:</label>
<input type="email" name="email" id="email"><br /><br />
<label for="mobile">手机📱号:</label>
<input type="mobile" id="mobile" name="mobile"><br /><br />
<label for="telephone">固话☎️号码:</label>
<input type="phone" id="telephone" name="telephone"><br /><br />
年龄：
<input type="text" name="age" id="age" /><br /><br />
分数：
<input type="text" name="score" id="score" /><br /><br />
体重：<input type="text" name="weight" id="weight" /><br /><br />
高度：<input type="text" name="height" id="height" /><br /><br />
宽度：<input type="text" name="width" id="width" /><br /><br />
<input type="submit" value="提交">
<input type="button" value="验证" onclick="validateForm()">
</form>
</body>
</html>